<template>
  <el-calendar v-model="curDate">
    <template #dateCell="{date, data}">
      <!-- data.day => 2022-06-11 data.day.split('-')-作为分隔符返回一个数组 ['2022', '06', '11'] -->
      <!-- pop() 删除数组最后一项并作为返回值返回 -->
      <!-- {{ data.day.split('-').pop() }} -->
      {{ data.day.substring(8) }}
      <span class="smybol">{{ isWeekend(date) ? '休' : '' }}</span>
    </template>
  </el-calendar>
</template>

<script>
export default {
  data() {
    return {
      curDate: new Date()
    }
  },
  methods: {
    isWeekend(date) {
      const day = date.getDay()
      return day === 6 || day === 0
    }
  }
}
</script>
<style lang="scss" scope>
  .smybol {
    background-color: tomato;
    border-radius: 50%;
    color: #fff;
  }
</style>
